import Icon from '@/components/Icon'
import { Button, TabBar } from 'antd-mobile'
import styles from './index.module.scss'

export default function Test() {
  return (
    <div className={styles.root}>
      <h1>测试页面</h1>
      <TabBar className="geek-tabbar">
        <TabBar.Item
          key="1"
          icon={(active: boolean) =>
            active ? (
              <Icon type="iconbtn_home_sel" />
            ) : (
              <Icon type="iconbtn_home" />
            )
          }
          title="世界和平"
        />

        <TabBar.Item
          key="2"
          icon={(active: boolean) =>
            active ? <Icon type="iconbtn_qa_sel" /> : <Icon type="iconbtn_qa" />
          }
          title="世界和平"
        />
        <TabBar.Item
          key="3"
          icon={(active: boolean) =>
            active ? (
              <Icon type="iconbtn_video_sel" />
            ) : (
              <Icon type="iconbtn_video" />
            )
          }
          title="世界和平"
        />

        <TabBar.Item
          key="4"
          icon={(active: boolean) =>
            active ? (
              <Icon type="iconbtn_mine_sel" />
            ) : (
              <Icon type="iconbtn_mine" />
            )
          }
          title="世界和平"
        />
      </TabBar>

      <Button color="primary">按钮</Button>
      <h4 className="geek-color">极客园主色</h4>
    </div>
  )
}
